<template>
  <view>
    <view class="bgc" :style="bgcHeight"></view>
    <view class="message_list">
      <view class="message_item" v-for="(item, i) in messageData" :key="i" @click="gotoContact(item.openid)">
        <view class="pot" v-if="item.show"></view>
        <view class="avatar">
          <image :src="item.showAvatarUrl"></image>
        </view>
        <view class="box_right">
          <view class="nickName">
            {{item.showNickName}}
          </view>
          <view class="time">
            {{item.time}}
          </view>
          <view class="last_content">
            {{item.content[item.content.length - 1].content_text}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        messageList: [],
        messageData: [],
        bgcHeight: ""
      };
    },
    onLoad() {
      uni.getSystemInfo({
        success: (res) => {
          this.bgcHeight = "height:" + res.windowHeight * 2 + "rpx;"
        }
      })
    },
    onShow() {
      this.getMessageList()
      setTimeout(() => {
        this.getMessageList()
      }, 250)
      this.login()
    },
    onPullDownRefresh() {
      this.getMessageList()
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 500);
    },
    methods: {
      async getMessageList() {
        this.messageData = []
        const db = uniCloud.database()
        const collection = db.collection('jiayi-content')
        const openid = uni.getStorageSync('jiayi_openid')
        const my_nickName = uni.getStorageSync('jiayi_nickname')
        const my_avatarUrl = uni.getStorageSync('jiayi_avatarUrl')
        const res = await collection.where({
          both_openid: openid
        }).get()
        this.messageList = res.result.data
        const dataOrder = []
        // 判断头像昵称是否变化
        this.messageList.map(e => {
          if (e.content.length > 1) {
            const data = e
            if (my_nickName !== data.nickName[0] && my_nickName !== data.nickName[1]) {
              const nickNameArray = uni.getStorageSync('jiayi_nickNameArray')
              if (nickNameArray.indexOf(data.nickName[0]) == -1) {
                data.showNickName = data.nickName[0]
              } else {
                data.showNickName = data.nickName[1]
              }
            } else {
              if (my_nickName !== data.nickName[0]) {
                data.showNickName = data.nickName[0]
              } else {
                data.showNickName = data.nickName[1]
              }
            }
            if (my_avatarUrl !== data.avatarUrl[0] && my_avatarUrl !== data.avatarUrl[1]) {
              const avatarUrlArray = uni.getStorageSync('jiayi_avatarUrlArray')
              if (avatarUrlArray.indexOf(data.avatarUrl[0]) == -1) {
                data.showAvatarUrl = data.avatarUrl[0]
              } else {
                data.showAvatarUrl = data.avatarUrl[1]
              }
            } else {
              if (my_avatarUrl !== data.avatarUrl[0]) {
                data.showAvatarUrl = data.avatarUrl[0]
              } else {
                data.showAvatarUrl = data.avatarUrl[1]
              }
            }
            if (data.content[data.content.length - 1].content_text == '') {
              data.content[data.content.length - 1].content_text = '[ 图片 ]'
            }
            if (data.both_openid[1] == 'myself') {
              data.openid = e.both_openid[0]
            } else if (data.both_openid[1] == openid) {
              data.openid = e.both_openid[0]
            } else {
              data.openid = e.both_openid[1]
            }
            // 判断是否显示红点
            const my_openid = uni.getStorageSync('jiayi_openid')
            if (data.lastOpenid !== my_openid && data.browse == false) {
              data.show = true
            } else {
              data.show = false
            }
            data.time = this.changeTime(data.content[data.content.length - 1].c_id)
            data.long = data.content.length
            dataOrder.push(data)
          }
        })
        dataOrder.sort((a, b) => {
          return a.content[a.long - 1].c_id <= b.content[b.long - 1].c_id ? 1 : -1
        })
        this.messageData = dataOrder
      },
      changeTime(timer) {
        // 将过去的时间进行分隔
        var first_time = timer.split(' ')
        const date = new Date() // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var year = date.getFullYear()
        var month = ('0' + (date.getMonth() + 1)).slice(-2)
        var sdate = ('0' + date.getDate()).slice(-2)
        var hour = ('0' + date.getHours()).slice(-2)
        var minute = ('0' + date.getMinutes()).slice(-2)
        var second = ('0' + date.getSeconds()).slice(-2)
        var result = year + '-' + month + '-' + sdate + ' ' + hour + ':' + minute + ':' + second
        // 将现在的时间进行分隔
        var second_time = result.split(' ')
        // 如果是同一天
        if (first_time[0] == second_time[0]) {
          var time_array = first_time[1].split(':')
          if (time_array[0] < 10) {
            time_array[0] = time_array[0].substr(-1)
          }
          if (time_array[0] < 6) {
            return ('凌晨' + time_array[0] + ':' + time_array[1])
          } else if (time_array[0] < 11) {
            return ('上午' + time_array[0] + ':' + time_array[1])
          } else if (time_array[0] < 13) {
            return ('中午' + time_array[0] + ':' + time_array[1])
          } else if (time_array[0] < 18) {
            return ('下午' + (time_array[0] - 12) + ':' + time_array[1])
          } else {
            return ('晚上' + (time_array[0] - 12) + ':' + time_array[1])
          }
        } else {
          // 不是同一天
          var one_array = first_time[0].split('-')
          var two_array = second_time[0].split('-')
          var first_year = one_array[0]
          var second_year = two_array[0]
          // 如果是同一年
          if (first_year == second_year) {
            if (one_array[1] < 10) {
              one_array[1] = one_array[1].substr(-1)
            }
            if (one_array[2] < 10) {
              one_array[2] = one_array[2].substr(-1)
            }
            return one_array[1] + '月' + one_array[2] + '日'
          } else {
            // 不是同一年
            if (one_array[1] < 10) {
              one_array[1] = one_array[1].substr(-1)
            }
            if (one_array[2] < 10) {
              one_array[2] = one_array[2].substr(-1)
            }
            return one_array[0] + '年' + one_array[1] + '月' + one_array[2] + '日'
          }
        }
      },
      gotoContact(item) {
        uni.navigateTo({
          url: '/subpkg/contact/contact?openid=' + item
        })
      },
      login() {
        const token = uni.getStorageSync('jiayi_token')
        if (token == '') {
          uni.redirectTo({
            url: '/subpkg/login/login'
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .bgc {
    position: fixed;
    top: 0;
    z-index: 10;
    background: linear-gradient(to bottom, #92fc9a, #f4f4f6);
    width: 760rpx;
  }

  .message_list {
    position: absolute;
    top: 0;
    z-index: 11;
  }

  .message_item {
    position: relative;
    display: flex;
    width: 760rpx;
    height: 120rpx;
    padding-left: 30rpx;
    padding-top: 20rpx;

    .pot {
      position: absolute;
      left: 115rpx;
      top: 12rpx;
      width: 25rpx;
      height: 25rpx;
      border-radius: 50%;
      background-color: #fc3535;
      z-index: 999;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 20rpx;
      overflow: hidden;

      image {
        width: 100rpx;
        height: 100rpx;
      }
    }

    .box_right {
      position: relative;
      width: 75%;
      margin-left: 20rpx;

      .nickName {
        margin-top: 10rpx;
        font-size: 32rpx;
      }

      .time {
        position: absolute;
        font-size: 26rpx;
        color: #aaaaaa;
        top: 30rpx;
        right: 0rpx;
      }

      .last_content {
        margin-top: 6rpx;
        font-size: 26rpx;
        color: #aaaaaa;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
</style>
